<template>
	<view class="v-home-page">

		<view class=" margin_30rpx_0 " style="margin-bottom: 30rpx;">
			<sunui-navbar v-if="tabListTab" :items="tabListTab" lineHeight="60rpx" :isCenter="true"
				:currentIndex="navIndexTab" padding="10rpx" :size="130" activeLineBg="#4972FE" textAlign="center"
				activeColor="#333333" activeLineWidth="45%" activeDirection="center" activeLineHeight="8rpx" :margin="0"
				@change="getChangeTab"></sunui-navbar>
		</view>



		<view class=" margin_30rpx_0 " v-if="navIndexTab==0">
			<sunui-navbar v-if="tabList" :items="tabList" lineHeight="60rpx" :isCenter="true" :currentIndex="navIndex"
				padding="10rpx" :size="130" activeLineBg="#4972FE" textAlign="center" activeColor="#333333"
				activeLineWidth="45%" activeDirection="center" activeLineHeight="8rpx" :margin="0"
				@change="getChange"></sunui-navbar>
		</view>


		<!-- 历史音频 -->
		<block v-if="navIndexTab==0">
			<mescroll-body ref="mescrollRef" :height="windowHeight + 'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item, index) in list" :key="index">
					<view class=" flex-between margin-top_30rpx" :class="checkIndex==index?'list-public':'list-publics'"
						@click="checkeBox(item,index)">
						<view class="flex-align-center">
							<block>
								<view class="display-a-jc r-play" @click="getVideoSendTts(index, item)"
									v-if="isPlay==1 && previewIndex == index">

									<image class="img-94" :src="group3197" mode=""></image>
								</view>
								<view class="display-a-jc r-play" @click="getVideoSendTts(index, item)" v-else>

									<image class="img-94" :src="group3177" mode=""></image>
								</view>
							</block>
							<!-- <block v-else>
								<view class="flex r-play">
									<image class="img-97" :src="tirmbreLoading"></image>
								</view>
							</block> -->
							<view class="flex-columns">
								<view class="r-name">{{ item.voiceName }}</view>
								<view class="r-date">{{ item.voice }}</view>
								<view class="r-date">类型:{{item.voiceType}}</view>

							</view>
						</view>
						<view class="flex-align-center">
							<block>
								<checkbox class="checked-cls" :checked="checkIndex==index?true:false"
									:class="item.checked == true ? 'checked' : ''" value="all"></checkbox>
							</block>
							<!-- <block v-else>
								<uv-icon name="reload" size="22" style="margin:0 10rpx 0 30rpx"
									@click="getSel(2)"></uv-icon>
							</block> -->

						</view>
					</view>
				</block>
				<view class="height90"></view>
				<view class="bottom-position flex">
					<view class="c-but2 flex" @click="videoConfirm()">
						<image mode="widthFix" :src="group3360Sever"></image>
						选择音色
					</view>
				</view>
			</mescroll-body>
		</block>


		<block v-else>
			<mescroll-body ref="mescrollRef" :height="windowHeight + 'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item, index) in list" :key="index">
					<view class=" flex-between margin-top_30rpx"
						:class="checkIndexSzr==index?'list-public':'list-publics'" @click="checkeBoxSzr(item,index)">
						<view class="flex-align-center">
							<block>
								<view class="display-a-jc r-play" @click="getVideoSendTtsSzr(index, item)"
									v-if="isPlaySzr==1 && previewIndexSzr == index">

									<image class="img-94" :src="group3197" mode=""></image>
								</view>
								<view class="display-a-jc r-play" @click="getVideoSendTtsSzr(index, item)" v-else>

									<image class="img-94" :src="group3177" mode=""></image>
								</view>
							</block>
							<!-- <block v-else>
								<view class="flex r-play">
									<image class="img-97" :src="tirmbreLoading"></image>
								</view>
							</block> -->
							<view class="flex-columns">
								<view class="r-name">{{ item.name }}</view>
								<!-- <view class="r-date">{{ item.voice }}</view> -->
								<view class="flex-align-center m-top10">
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.sex==1?'男':'女'}}
									</view>
									<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.age_group==1?'儿童':item.age_group==2?'青年':item.age_group==3?'中年':'中老年'}}
									</view>
									<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.language==0?'中文':item.language==1?'英文':item.language==2?'日语':item.language==3?'韩语':'俄语'}}
									</view>

									<!-- <view class="r-date">{{ item.create_time }} |</view> -->
									<!-- <view class="flex-align-center margin-left_16rpx" @click="delAudio(item)">
										<uv-icon
											class=" padding-right_10rpx icon-cls p-right10 font-size_30rpx color999"
											size="40rpx" style="margin:4rpx 14rpx 0rpx 20rpx;font-weight: 600;"
											name="trash"></uv-icon>
										
										<view class="font-size_26rpx color999">删除</view>
									</view> -->
								</view>

							</view>
						</view>
						<view class="flex-align-center">
							<block>
								<checkbox class="checked-cls" :checked="checkIndexSzr==index?true:false"
									:class="item.checked == true ? 'checked' : ''" value="all"></checkbox>
							</block>
							<!-- <block v-else>
								<uv-icon name="reload" size="22" style="margin:0 10rpx 0 30rpx"
									@click="getSel(2)"></uv-icon>
							</block> -->

						</view>
					</view>
				</block>
				<view class="height90"></view>
				<view class="bottom-position flex">
					<view class="c-but2 flex" @click="videoConfirmSzr()">
						<image mode="widthFix" :src="group3360Sever"></image>
						选择音色
					</view>
				</view>
			</mescroll-body>
		</block>



	</view>
</template>

<script>
	const innerAudioContext2 = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				group3177: this.$imgs.group3177,
				group3197: this.$imgs.group3197,
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				butIcon2: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/but-icon2.png',
				digitalPeopTimbreDel: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/timbreDel.png',
				tirmbreLoading: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/tirmbre-loading.png',
				list: [{
					sendId: 2,
					timbreName: '青少年',
					createTime: '2025.11.20',
					second: 15
				}],
				tabList: [],
				pid: '',
				navIndex: 0,
				navIndexTab: 0,
				tabListTab: [{
						id: 1,
						name: 'AI配音'
					},
					{
						id: 2,
						name: '我的音色'
					}
				],
				checkIndex: 0,
				checkIndexSzr: 0,
				aiDubbingObj: {},
				group3360Sever: this.$imgs.group3360Sever,
				previewIndex: 0,
				previewIndexSzr: 0,
				isPlay: 2,
				isPlaySzr: 2,
				tallySet: uni.getStorageSync('tallySet'),
				content: ['秋天的公园里，落叶铺满了小路，踏上去有种说不出的舒爽，偶然间抬头，那抹深秋的蓝天格外高远、明净。'],
				user: uni.getStorageSync('user'),


			}
		},
		onShow() {




		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.aiListFn()


		},
		onUnload() {
			console.log('yem1')
			innerAudioContext2.pause();
			this.isPlay = 2;
			this.isPlaySzr = 2
		},
		computed: {


		},
		methods: {
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async soundSaveFn(id) {
				let totalDeduction = ((this.content[0].length / 100) * this.tallySet.sound_tally).toFixed(2);
				if (totalDeduction < 100) {
					totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
				}

				if (Number(this.user.balance) <= Number(totalDeduction)) {
					this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.soundSave,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 0,
						task_id: 0,
						voice_id: id,
						msg: [this.content[0]]
					}
				});
				if (result.errno == 0) {

					uni.hideLoading()
					this.voiceSetDemoFn(id, result.data)


				} else {
					setTimeout(() => {
						this.$sun.toast(result.message, 'none')
					}, 200)
					uni.hideLoading()
				}
			},

			async voiceSetDemoFn(voice_id, sound_id) {
				const result = await this.$http.post({
					url: this.$api.voiceSetDemo,
					data: {
						uid: uni.getStorageSync('uid'),

						voice_id: voice_id,
						sound_id: sound_id
					}
				});
				if (result.errno == 0) {
					console.log(result.data)


					this.isPlaySzr = '';

					this.urlVoice = result.data
					innerAudioContext.src = result.data
					setTimeout(() => {
						this.mescroll.resetUpScroll();
					}, 200)



					innerAudioContext.play();
					innerAudioContext.onPlay(() => {


						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlaySzr = 1;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');



					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});



				} else {
					this.$sun.toast(result.message, 'none');
				}
			},
			getVideoSendTts(index, item) {


				console.log(item.voiceUrl)
				innerAudioContext2.src = item.voiceUrl
				this.previewIndex = index
				if (this.isPlay == 2) {
					this.isPlay = 1;
					innerAudioContext2.play();
					innerAudioContext2.onCanplay(() => {
						console.log('开始播放');
					});
					innerAudioContext2.onEnded(() => {
						this.isPlay = 2;

						innerAudioContext2.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');
					});
					innerAudioContext2.onError(err => {
						innerAudioContext2.destroy();
						console.log('播放音频出错：', err);
					});



				} else {
					this.isPlay = 2;

					innerAudioContext2.pause();
					innerAudioContext2.onPause(() => {
						console.log('暂停播放');
					});

				}
			},
			checkeBox(item, index) {
				console.log(item)
				this.checkIndex = index
				this.aiDubbingObj = item
				this.aiDubbingObj.audio_type = 1


			},
			checkeBoxSzr(item, index) {
				console.log(item)
				this.checkIndexSzr = index
				this.aiDubbingObj = item
				this.aiDubbingObj.audio_type = 2
				


			},

			videoConfirmSzr() {
				console.log(this.aiDubbingObj)
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.aiTimbreFuns(JSON.stringify({
					aiTimbreObj: this.aiDubbingObj
					// 识别是数字人 还是单镜头 或者多镜头的数字人



				})); //重点$vm
				uni.navigateBack();

			},
			videoConfirm() {
				console.log(this.aiDubbingObj)
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.aiDubbingFuns(JSON.stringify({
					aiDubbingObj: this.aiDubbingObj


				})); //重点$vm
				uni.navigateBack();

			},
			getChange(index) {
				innerAudioContext2.pause();
				this.isPlay = 2;
				this.navIndex = index;

				this.pid = this.tabList[index].id


				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});


			},
			getChangeTab(index) {
				innerAudioContext2.pause();

				this.navIndexTab = index;


				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});
			},
			async aiListFn() {
				const result = await this.$http.post({
					url: this.$api.aiList,
					data: {
						pid: 0,


						page: 1,
						limit: 20
					}
				});
				if (result.errno == 0) {


					console.log(result.data.list)

					this.tabList = result.data.list.map((item, index) => {
						return {
							id: item.id,
							name: item.voiceName
						}
					})
					this.pid = this.tabList[0].id
					this.$nextTick(() => {
						this.mescroll.resetUpScroll();
					});

				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			getVideoSendTtsSzr(index, item) {
				this.previewIndexSzr = index
				if (!item.demo) {

					uni.showModal({
						title: '数字人试听',
						content: '每一百字扣 ' + this.tallySet.sound_tally + '算力,后续试听不在扣除算力',
						confirmText: '试听',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {

								this.soundSaveFn(item.id)


							} else if (res.cancel) {

							}
						}
					});




				} else {
					innerAudioContext2.src = item.demo

					if (this.isPlaySzr == 2) {
						this.isPlaySzr = 1;
						innerAudioContext2.play();
						innerAudioContext2.onCanplay(() => {
							console.log('开始播放');
						});
						innerAudioContext2.onEnded(() => {
							this.isPlaySzr = 2;

							innerAudioContext2.pause();
							// this.$sun.toast("音频播放完成");
							console.log('音频播放结束：');
						});
						innerAudioContext2.onError(err => {
							innerAudioContext2.destroy();
							console.log('播放音频出错：', err);
						});



					} else {
						this.isPlaySzr = 2;

						innerAudioContext2.pause();
						innerAudioContext2.onPause(() => {
							console.log('暂停播放');
						});

					}
				}




			},


			async upCallback(scroll) {
				if (this.navIndexTab == 0) {
					const result = await this.$http.post({
						url: this.$api.aiList,
						data: {
							pid: this.pid,


							page: scroll.num,
							limit: 10
						}
					});
					if (result.errno == 0) {


						console.log(result.data.list)



						this.mescroll.endByPage(result.data.list.length, result.data.count);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						console.log(this.list)

						this.aiDubbingObj = this.list[0]
						this.aiDubbingObj.audio_type = 1

					} else {
						this.$sun.toast(result.message, 'none')
					}
				} else {
					const result = await this.$http.post({
						url: this.$api.voiceList,
						data: {
							uid: uni.getStorageSync("uid"),




							is_status: 2,

							page: scroll.num,
							psize: 10
						}
					});
					if (result.errno == 0) {

						this.mescroll.endByPage(result.data.list.length, result.data.total);
						if (scroll.num == 1) this.list = [];
						this.list = this.list.concat(result.data.list);
						console.log(this.list)

						this.aiDubbingObj = this.list[0]
						
						this.aiDubbingObj.audio_type = 2

						if (!this.list.length) {

							uni.showModal({
								title: '声音克隆',
								content: '当前没有声音克隆是否需要去添加',
								success: async (res) => {
									if (res.confirm) {


										this.$sun.navTo('/pages/digitalHuman/soundCloning')

									} else if (res.cancel) {

									}
								}
							});



						}
					}
				}





			},

		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;

		.img-97 {
			width: 70%;
			height: 70%;
			animation: rotate 1.5s linear infinite; //图片旋转
		}


		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		.list-public {
			width: 705rpx !important;
			background-color: #FAFAFA;
			padding: 30rpx 20rpx;
			position: relative;
			left: -2%;
			border-radius: 20rpx;
			border: 2rpx solid rgb(123, 109, 255);
		}

		.list-publics {
			background-color: #FAFAFA;
			padding: 30rpx 20rpx;
			position: relative;
			left: -3%;
			border-radius: 20rpx;
			// border: 2rpx solid rgb(123, 109, 255);
		}

		.r-play {
			margin-right: 30rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}

		.img-94 {
			width: 100%;
			height: 100%;
		}

		.r-date {
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
		}

		.height90 {
			height: 212rpx;
		}

		.bottom-position {
			z-index: 999;
			position: fixed;
			bottom: 0;
			height: 192rpx;
			width: 100%;
			left: 0%;

			.c-but2 {
				image {
					width: 31.6rpx;
					margin-right: 10rpx;

				}

				height: 100rpx;
				width: 90%;
				padding: 30rpx 0;
				border-radius: 10rpx;
				background: #4972FE;
				margin: 0 32rpx;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
			}

		}

	}
</style>